<template>
  <view class="address-add-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="header-title">我的地址</view>
      <view class="header-actions">
        <text class="action-icon">⋯</text>
        <text class="action-icon">−</text>
        <text class="action-icon">◎</text>
      </view>
    </view>

    <!-- 地址信息表单 -->
    <view class="form-container">
      <!-- 选择地址 -->
      <view class="form-item" @click="selectAddress">
        <view class="form-label">选择地址</view>
        <view class="form-value">
          <text :class="{ 'placeholder': !selectedAddress }">
            {{ selectedAddress || '选择地址' }}
          </text>
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <!-- 选择楼栋 -->
      <view class="form-item" @click="selectBuilding">
        <view class="form-label">选择楼栋</view>
        <view class="form-value">
          <text :class="{ 'placeholder': !selectedBuilding }">
            {{ selectedBuilding || '选择楼栋' }}
          </text>
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <!-- 楼号-门牌号 -->
      <view class="form-item">
        <view class="form-label">楼号-门牌号</view>
        <view class="form-input-container">
          <input 
            class="form-input" 
            v-model="buildingNumber" 
            placeholder="楼号-门牌号"
            maxlength="20"
          />
        </view>
      </view>

      <!-- 联系人 -->
      <view class="form-item">
        <view class="form-label">联系人</view>
        <view class="form-input-container">
          <input 
            class="form-input" 
            v-model="contactName" 
            placeholder="联系人"
            maxlength="20"
          />
        </view>
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <view class="form-label">性别</view>
        <view class="gender-options">
          <view 
            :class="['gender-option', { active: gender === 'male' }]"
            @click="selectGender('male')"
          >
            <view class="radio-circle">
              <view v-if="gender === 'male'" class="radio-inner"></view>
            </view>
            <text class="gender-text">男</text>
          </view>
          <view 
            :class="['gender-option', { active: gender === 'female' }]"
            @click="selectGender('female')"
          >
            <view class="radio-circle">
              <view v-if="gender === 'female'" class="radio-inner"></view>
            </view>
            <text class="gender-text">女</text>
          </view>
        </view>
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <view class="form-label">手机号</view>
        <view class="form-input-container">
          <input 
            class="form-input" 
            v-model="phoneNumber" 
            placeholder="手机号"
            type="number"
            maxlength="11"
          />
        </view>
      </view>

      <!-- 设为默认地址 -->
      <view class="form-item">
        <view class="form-label">设为默认地址</view>
        <view class="switch-container">
          <switch 
            :checked="isDefault" 
            @change="toggleDefault"
            color="#f44336"
          />
        </view>
      </view>
    </view>

    <!-- 底部保存按钮 -->
    <view class="bottom-actions">
      <button class="save-btn" @click="saveAddress" :disabled="!canSave || isSaving">
        <text class="save-text">{{ isSaving ? '保存中...' : '保存' }}</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { createAddress } from '@/api/express-pickup'
import type { CreateAddressRequest } from '@/types/api/express-pickup'

// 响应式数据
const selectedAddress = ref('')
const selectedBuilding = ref('')
const buildingNumber = ref('')
const contactName = ref('')
const gender = ref<'male' | 'female'>('male')
const phoneNumber = ref('')
const isDefault = ref(false)
const isSaving = ref(false)

// 计算属性
const canSave = computed(() => {
  return selectedAddress.value && 
         selectedBuilding.value && 
         buildingNumber.value.trim() && 
         contactName.value.trim() && 
         phoneNumber.value.trim()
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

const selectAddress = () => {
  const addressOptions = [
    '振涛/保理/科技-校园贴吧',
    '东院-教学楼',
    '西院-图书馆',
    '北门-宿舍区',
    '南门-商业街'
  ]
  
  uni.showActionSheet({
    itemList: addressOptions,
    success: (res) => {
      selectedAddress.value = addressOptions[res.tapIndex]
    }
  })
}

const selectBuilding = () => {
  const buildingOptions = [
    '科技(东院)—皇悦3期',
    '科技(东院)—皇悦2期',
    '科技(东院)—皇悦1期',
    '保理(西院)—阳光小区',
    '振涛(北门)—和谐家园'
  ]
  
  uni.showActionSheet({
    itemList: buildingOptions,
    success: (res) => {
      selectedBuilding.value = buildingOptions[res.tapIndex]
    }
  })
}

const selectGender = (selected: 'male' | 'female') => {
  gender.value = selected
}

const toggleDefault = (e: any) => {
  isDefault.value = e.detail.value
}

const saveAddress = async () => {
  if (!canSave.value) {
    uni.showToast({
      title: '请完善必填信息',
      icon: 'none'
    })
    return
  }

  if (isSaving.value) return

  try {
    isSaving.value = true
    
    // 准备地址数据
    const addressData: CreateAddressRequest = {
      name: contactName.value,
      phone: phoneNumber.value,
      fullAddress: `${selectedAddress.value} ${selectedBuilding.value} ${buildingNumber.value}`,
      isDefault: isDefault.value
    }

    // 调用创建地址API
    const response = await createAddress(addressData)
    
    if (response.success) {
      uni.showToast({
        title: '地址保存成功',
        icon: 'success'
      })
      
      // 延迟返回，让用户看到成功提示
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      uni.showToast({
        title: response.message || '地址保存失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('保存地址失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  } finally {
    isSaving.value = false
  }
}
</script>

<style scoped>
.address-add-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 20rpx;
}

.action-icon {
  font-size: 32rpx;
  color: #666;
}

/* 表单容器 */
.form-container {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.form-value {
  display: flex;
  align-items: center;
  gap: 15rpx;
  color: #333;
  font-size: 28rpx;
}

.form-value .placeholder {
  color: #999;
}

.arrow-icon {
  font-size: 24rpx;
  color: #ccc;
}

/* 输入框 */
.form-input-container {
  flex: 1;
  margin-left: 20rpx;
}

.form-input {
  width: 100%;
  height: 60rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  text-align: right;
}

/* 性别选择 */
.gender-options {
  display: flex;
  gap: 40rpx;
}

.gender-option {
  display: flex;
  align-items: center;
  gap: 15rpx;
  cursor: pointer;
}

.radio-circle {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.gender-option.active .radio-circle {
  border-color: #f44336;
}

.radio-inner {
  width: 24rpx;
  height: 24rpx;
  background-color: #f44336;
  border-radius: 50%;
}

.gender-text {
  font-size: 28rpx;
  color: #333;
}

/* 开关 */
.switch-container {
  margin-left: 20rpx;
}

/* 底部按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.save-btn {
  width: 100%;
  height: 88rpx;
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.save-btn:disabled {
  background-color: #ccc;
  color: #999;
}

.save-text {
  font-size: 32rpx;
  font-weight: 500;
}
</style>
